<template>
  <div ref="dom" style="width: 1080px;height: 500px;"></div>
</template>

<script>
  import * as echarts from 'echarts';
  import { on, off } from '@/libs/tools'
  export default {
    name: "ProjectProcessEchart",

    data() {
      return {
        dom: null
      }
    },
    methods: {
      resize () {
        this.dom.resize()
      },
      initCharts () {
        const hexToRgba = (hex, opacity) => {
          let rgbaColor = "";
          let reg = /^#[\da-f]{6}$/i;
          if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
              "0x" + hex.slice(3, 5)
            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
          }
          return rgbaColor;
        }
        const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
        const xData = ['08:00', '09:00', '10:00', '11:00','12:00', '13:00', '14:00', '15:00', '16:00'];
        var option = {
          backgroundColor: "#fff",
          width: '970px',
          height: '400px',
          title: {
            // text: "项目工期",
            padding: 10,
            textStyle: {
              fontSize: 17,
              fontWeight: "bolder",
              color: "#333"
            },
            subtextStyle: {
              fontSize: 13,
              fontWeight: "bolder"
            }
          },
          legend: {
            data: ["计划工期", "实际工期"],
            align: "right",
            right: 80,
            top: 50
          },
          grid: {
            containLabel: true,
            show: false,
            right: 130,
            left: 40,
            bottom: 40,
            top: 90
          },
          xAxis: {
            type: "time",
            axisLabel: {
              "show": true,
              "interval": 0
            }
          },
          yAxis: {
            axisLabel: {
              show: true,
              interval: 0,
              formatter: function(value, index) {
                var last = ""
                var max = 6;
                var len = value.length;
                var hang = Math.ceil(len / max);
                if (hang > 1) {
                  for (var i = 0; i < hang; i++) {
                    var start = i * max;
                    var end = start + max;
                    var temp = value.substring(start, end) + "\n";
                    last += temp; //凭借最终的字符串
                  }
                  return last;
                } else {
                  return value;
                }
              }
            },
            data: ["规划设计", "挖槽定线", "浚前测量", "导标设置", "断面尺寸测量", "施工辅助工程", "开工展布", "施工", "验收", "总工期"]
          },
          tooltip: {
            trigger: "axis",
            formatter: function(params) {
              var res = "";
              var name = "";
              var start0 = "";
              var start = "";
              var end0 = "";
              var end = "";
              var flag = false;
              for (var i in params) {
                var k = i % 2;
                if (!k) { //偶数
                  start0 = params[i].data;
                  if(start0 == '-') {
                    start = '未结束';
                  } else {
                    start = start0.getFullYear() + "-" + (start0.getMonth() + 1) + "-" + start0.getDate();
                  }
                }
                if (k) { //奇数
                  name = params[i].seriesName;
                  end0 = params[i].data;
                  if(end0 == '-') {
                    flag = true;
                    end = '未开始';
                  } else {
                    end = end0.getFullYear() + "-" + (end0.getMonth() + 1) + "-" + end0.getDate();
                  }
                  res += name + " : " + end + "~" + start + "</br>";
                }
              }
              if(flag) {
                res += '进度: 0%</br>';
              } else {
                if(params[0].axisValue == '总工期') {
                  res += '进度: 48.5%</br>';
                } else {
                  res += '进度: 100%</br>';
                }
              }
              return res;
            }
          },
          series: [
            {
              name: "计划工期",
              type: "bar",
              stack: "总量0",
              label: {
                normal: {
                  show: true,
                  color: "#000",
                  position: "right",
                  formatter: function(params) {
                    return params.seriesName
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: "skyblue",
                  borderColor: "#fff",
                  borderWidth: 2
                }
              },
              zlevel: -1,
              data: [
                new Date("2021-04-30"),
                new Date("2021-05-30"),
                new Date("2021-06-30"),
                new Date("2021-07-30"),
                new Date("2021-08-30"),
                new Date("2021-09-30"),
                new Date("2021-10-30"),
                new Date("2021-11-30"),
                new Date("2021-12-30"),
                new Date("2021-12-30")
              ]
            },
            {
              name: "计划工期",
              type: "bar",
              stack: "总量0",
              itemStyle: {
                normal: {
                  color: "white",
                }
              },
              zlevel: -1,
              z: 3,
              data: [
                new Date("2021-03-30"),
                new Date("2021-04-30"),
                new Date("2021-05-30"),
                new Date("2021-06-30"),
                new Date("2021-07-30"),
                new Date("2021-08-30"),
                new Date("2021-09-30"),
                new Date("2021-10-30"),
                new Date("2021-11-30"),
                new Date("2021-03-30")]
            },
            {
              name: "实际工期",
              type: "bar",
              stack: "总量2",
              label: {
                normal: {
                  show: true,
                  color: "#000",
                  position: "right",
                  formatter: function(params) {
                    if(params.name == '总工期') {
                      return '48.5%';
                    } else {
                      return '100%';
                    }
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: "rgb(0,127,220)",
                  borderColor: "#fff",
                  borderWidth: 2
                }
              },
              zlevel: -1,
              data: [
                new Date("2021-04-20"),
                new Date("2021-06-15"),
                new Date("2021-06-30"),
                new Date("2021-07-30"),
                '-',
                '-',
                '-',
                '-',
                '-',
                new Date("2021-07-30")]
            },  {
              name: "实际工期",
              type: "bar",
              stack: "总量2",
              itemStyle: {
                normal: {
                  color: "white",
                }
              },
              zlevel: -1,
              z: 3,
              data: [
                new Date("2021-03-30"),
                new Date("2021-04-30"),
                new Date("2021-05-30"),
                new Date("2021-06-30"),
                '-',
                '-',
                '-',
                '-',
                '-',
                new Date("2021-03-30")]
            },
          ]
        };
        this.$nextTick(() => {
          this.dom = echarts.init(this.$refs.dom);
          this.dom.setOption(option);
          on(window, 'resize', this.resize)
        })
      }
    },
    mounted() {
      this.initCharts()
    },
    beforeDestroy () {
      off(window, 'resize', this.resize)
    }
  }
</script>

<style scoped>

</style>
